<template>
  <div class="home">
    <!-- 头部 -->
    <div class="head">
      <img src="../assets/logo.svg" style="width: 70px; margin-left: 100px" />
      <h1 style="margin-left: 50px">七龙珠管理系统</h1>
    </div>

    <!-- 内容区开始 -->
    <div style="display: flex">
      <!-- 导航区 -->
      <div class="navigation">
        <!-- <RouterLink :to="{ name: 'clazz' }">clazz</RouterLink>
          <RouterLink :to="{ name: 'clazzE' }">clazzE</RouterLink> -->
        <el-menu router style="border: 0; margin-top: -420px; background-color: lightgreen">
          <el-menu-item index="/home">
            <el-icon><House /></el-icon>首页
          </el-menu-item>

          <el-menu-item index="/home/practise">
            <el-icon><DataAnalysis /></el-icon>练习
          </el-menu-item>

          <el-menu-item index="/home/test">
            <el-icon><Tickets /></el-icon>测试
          </el-menu-item>

          <el-sub-menu index="1">
            <template #title>
              <el-icon><User /></el-icon>
              <span>前后端分离</span>
            </template>
            <el-menu-item style="background-color: salmon" index="/home/clazz">纯css</el-menu-item>
            <el-menu-item style="background-color: salmon" index="/home/clazzE"
              >ElementPlus</el-menu-item
            >
          </el-sub-menu>
          <el-menu-item index="/home/book">
            <el-icon><Notebook /></el-icon>书本练习
          </el-menu-item>
        </el-menu>
      </div>
      <div class="content">
        <RouterView />
      </div>
    </div>
    <!-- 内容区结束 -->
  </div>
</template>

<script setup>
import { RouterView } from 'vue-router'
</script>

<style scoped>
.head {
  display: flex;
  align-items: center;
  justify-content: center;
  width: 100%;
  height: 100px;
  background-color: bisque;
  justify-content: flex-start;
}

.navigation {
  display: flex;
  background-color: aquamarine;
  width: 200px;
  align-items: center;
  min-height: calc(100vh - 100px);
  justify-content: center;
}

.home {
  height: 100vh;
  width: 100vw;
}

.content {
  flex: 1;
  display: flex;
  flex-direction: column;
}
</style>
